import { useEffect, FC, ReactNode, useState, useRef } from 'react';
import { View, Text, Image, ScrollView } from '@tarojs/components'
import { AtSearchBar } from 'taro-ui'
import { WineCategoryType, WineTypeEnum, winePriceList } from './config'
import './index.less';
import Quotes from '@resource/tabImg/quotesOn.png'
import { Trend, defaultTrendState, TrendStateType } from './components'
import { useSetState } from '@hooks/index.ts'
import { wineCategoryList } from '@untils/common'
import ToOpen from '@resource/tabImg/toOpen.svg'
import Taro from '@tarojs/taro';
import { getDrinkPrice, getDrinkList } from '@api/quotes.ts'

// 定义 Props 接口
interface Props {
  children: ReactNode;
}
const { usually } = WineTypeEnum
const Index: FC<Props> = () => {
  const [inputValue, setInputValue] = useState<string>('')
  const [trendState, setTrendState] = useSetState<TrendStateType>({ defaultTrendState })
  const [tabKey, setTabkey] = useState(1)
  const [openVisible, setOpenVisible] = useState(false)
  const [categoryList, setCategoryList] = useState([])

  const queryDrinkList = async (category_id: string = '') => {
    const result = await getDrinkList(category_id)
    if (result.code === 200) {
      const data = result?.data?.data || []
      setCategoryList(data)
    }
  }

  useEffect(() => {
    queryDrinkList()
    // 任何你需要在组件挂载时执行的副作用
  }, []);

  const inputonChange = (value: string): void => {
    setInputValue(value)
  }

  const onActionClick = () => {
  }

  const handleTrend = () => {
    setTrendState({ id: '', title: '', visible: false })
  }

  const closeActionBar = () => {
    setOpenVisible(false)
  }

  const handleCheckLabel = (label_type: number) => {
    setTabkey(label_type)
  }
  return (
    <View className='quotes' onClick={closeActionBar}>
      <View className='body'>
        <View className='headerBox'>
          <View className='header'>
            <AtSearchBar
              className='searchBtn'
              actionName='搜一下'
              value={inputValue}
              onChange={inputonChange}
              onActionClick={onActionClick}
            />
          </View>
          <View className='action-bar'>
            <ScrollView
              className="labelList-container"
              scrollX
              style={{ whiteSpace: 'nowrap' }}
              scrollWithAnimation={true}
              scrollIntoView={`label-${tabKey}-single`}
              scrollIntoViewAlignment='center'
            >
              {
                wineCategoryList.map(item => {
                  const { name, type } = item
                  return <Text id={'label-' + type + '-single'} onClick={() => handleCheckLabel(type)} key={type} className={`label ${tabKey === type && 'checked-label'}`}>{name}</Text>
                })
              }
            </ScrollView>
            <View className='imagebox'>
              <Image className={`show-more ${openVisible ? 'toUp' : 'toDown'}`} src={ToOpen}
                mode='aspectFit'
                onClick={(e) => {
                  e.stopPropagation()
                  setOpenVisible(!openVisible)
                }}
              />
            </View>
          </View>

          <View className={`allLabelList ${openVisible ? 'alllabel-open' : 'alllabel-close'}`}>
            {
              wineCategoryList.map(item => {
                const { name, type } = item
                return <Text key={type} className='single-lable' onClick={() => {
                  setTabkey(type)
                }}>{name}</Text>
              })
            }
          </View>
        </View>

        <View className="content">
          <View className='winePriceList'>
            <View className='single signgl-title'>
              <View className='left'>
                <Text className='name'>酒名称</Text>
              </View>
              <View className='center'>
                <Text className='price'>现价(涨跌/元)</Text>
              </View>
              <View className='right'>行情</View>
            </View>
            {
              winePriceList.map(item => {
                const { name, currentPrice, increase, id } = item
                return <View className='single'>
                  <View className='left'>
                    <Text className='name'>{name}</Text>
                  </View>
                  <View className='center'>
                    <Text className='price'>¥{currentPrice}</Text>
                    <Text className='increase'>({increase})</Text>
                  </View>
                  <View className='right' onClick={() => setTrendState({ id, title: name, visible: true })}>
                    <Image className='toLink' src={Quotes} mode='aspectFit' />
                  </View>
                </View>
              })
            }
          </View>
        </View>
      </View>
      <Trend state={trendState} callback={handleTrend} />
    </View>
  );
};

export default Index;
